<template>
	<div id="home" class="text-left">


		<div class="row">
			<div class="col-md-8 " style="background-color:#555555; height: 3.55rem; color: #999; line-height: 3.55rem;">博客内容</div>
			<div class="col-md-4  text-justify" style="background-color: #222222; height: 3.55rem; color: #555555; line-height: 3.55rem;">类别目录


			</div>

		</div>

		<div class="row">
			<div class="col-md-8 bordered" style="background-color:#ADADAD;  color: #101010; ">
				<div v-for="item in blog">
					<div class="" style="color: #000000; font-size: 2.875rem; line-height:  3.875rem;">{{item.title}}</div>

					<div class="blog" v-html="item.content">

					</div>

				</div>
			</div>
			<div class="col-md-4 text-center text-justify" style="background-color: #B9DEF0; color: #222222;height: 62.5rem;padding: 1.875rem;">

				<div class="row">

					<div @click="replace('springcloud')" class="col-md-3 text-center category" style="cursor: pointer;">springcloud</div>
					<div @click="replace('springmvc')" class="col-md-4 text-center category" style="cursor: pointer;">springmvc</div>
									<div @click="replace('感情')" class="col-md-2 text-center category" style="cursor: pointer;">感情</div>
					<div @click="replace('struts')" class="col-md-5 text-center category" style="cursor: pointer;">struts</div>
					<div @click="replace('hibernate')" class="col-md-3 text-center category" style="cursor: pointer;">hibernate</div>
			<div @click="replace('电影')" class="col-md-2 text-center category" style="cursor: pointer;">电影</div>
					<div @click="replace('mybatis')" class="col-md-4 text-center category" style="cursor: pointer;">mybatis</div>

					<div @click="replace('bootstrap')" class="col-md-3 text-center category" style="cursor: pointer;">bootstrap</div>
							<div @click="replace('vue')" class="col-md-2 text-center category" style="cursor: pointer;">vue</div>
					<div @click="replace('springboot')" class="col-md-4 text-center category" style="cursor: pointer;">springboot</div>

					<div @click="replace('mysql')" class="col-md-3 text-center category" style="cursor: pointer;">mysql</div>
						<div @click="replace('工作')" class="col-md-2 text-center category" style="cursor: pointer;">工作</div>
				<div @click="replace('Jsp')" class="col-md-2 text-center category" style="cursor: pointer;">Jsp</div>
						<div @click="replace('html')" class="col-md-4 text-center category" style="cursor: pointer;">html</div>
					<div @click="replace('spring')" class="col-md-3 text-center category" style="cursor: pointer;">spring</div>

					<div @click="replace('java')" class="col-md-4 text-center category" style="cursor: pointer;">java</div>

			
					
	
					
					
					
				

				</div>

			</div>

			<footers></footers>
		</div>




	</div>
</template>

<script>
	import {
		getmovie,
		gethlw,
		gettoken,
		getBlog


	} from "../network/home.js"

	import footers from '../components/footer.vue'

	export default {
		name: 'Home',
		data() {
			return {
				blog: [],
				category: "springboot"
			}
		},
		components: {
			footers
		},
		methods: {
			getmovies(value) {
				getmovie(value).then(data => {
					console.log(data)
				}).catch(err => {
					console.log(err)
				});
			},
			getToken() {
				gettoken().then(data => {
					console.log(data)
				}).catch(err => {
					console.log(err)
				});
			},
			replace(value) {

				this.$router.replace({
					path: '/home',
					query: {
						category: value
					}
				});

				this.category = this.$route.query.category;

				getBlog(this.category).then(res => {
					this.blog = res.data;
				}).catch(err => console.log(err))


			}


		},
		created() {
			console.log()
			if(this.$route.query.category)
			this.category = this.$route.query.category;
			
			this.$store.commit("blogCategoryUpdate",this.category);
			
			getBlog(this.category).then(res => {
				this.blog = res.data;
				console.log(this.blog)
			}).catch(err => console.log(err))
		},
		mounted: function() {
			//可用于设置自适应屏幕，根据获得的可视宽度（兼容性）判断是否显示
			let w = document.documentElement.offsetWidth || document.body.offsetWidth;
			if (w < 1000) {
				this.show = false;
			}




		},
		beforeRouteEnter(to, from, next) {

			next();
		}
	}
</script>

<style>
	.category {
		height: 2.625rem;
		background-color: #555555;
		margin: 0.625rem;
		line-height: 2.625rem;
	}
</style>
